<template>
	<view class="cardGroup-imitate">
		<uni-nav-bar :fixed="true" :border="false" background-color="none" title="卡组" status-bar>
			<template v-slot:left>
				<up-icon @click="onClickLeft" name="arrow-left" size="36rpx"></up-icon>
			</template>
		</uni-nav-bar>
		<view class="mode-choose">
			<view @click="filterInfo.mode = item.id" :class="{'active-mode': filterInfo.mode == item.id}"
				class="mode-item" v-for="item in modeFilter">
				{{item.name}}
			</view>
		</view>
		<view class="occupation-list">
			<view class="occupation-item" v-for="item in occupationFilter">
				<view class="item-image" @click="handleOpenCreate(item)">
					<image :src="item.image" mode="aspectFit"></image>
				</view>
				<view class="item-name">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="save-button">
			<up-button @click="handleOpenCreateByCode" class="save-button" color="#FD8B00" type="primary" shape="circle"
				text="使用代码创建"></up-button>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow,
		onHide,
		onUnload
	} from "@dcloudio/uni-app";
	import {
		getCurrentInstance,
		ref
	} from 'vue';
	import request from "/http/index.js"

	const filterInfo = ref({
		mode: '',
	})
	const handleBackHome = () => {
		uni.reLaunch({
			url: '/pages/home/index'
		})
	}
	const modeFilter = ref([])
	const model = ref('')
	const onClickLeft = () => {

		// 			 uni.navigateBack({
		//     delta: 1 // 或者根据需要返回的层级调整
		// })
		uni.switchTab({
			url: '/pages/home/index'
		}) // 返回上一级页面

	}
	// 职业下拉
	const occupationFilter = ref([])
	const handleOpenCreateByCode = () => {
		uni.navigateTo({
			url: '/homePackages/creatByCode'
		})
	}
	const handleOpenCreate = (item) => {
		uni.navigateTo({
			url: `/homePackages/createCardGroup?mode=${filterInfo.value.mode}&cardClass=${item.enname}`
		});
	}
	// 公共筛选选项
	const initFilterConfig = () => {
		request({
			url: '/api/common/config',
			method: 'POST',
		}).then(res => {
			console.log(res);
			if (res.code != 1) {
				return;
			}
			modeFilter.value = (res.data?.mode || []).reverse()
			filterInfo.value.mode = modeFilter.value[0].id
			//职业下拉
			occupationFilter.value = (res.data.property?.cardClass?.values || []).filter(dd => dd.name !==
				'中立')
		})
	}
	onLoad((e) => {
		if (e.model) {
			model.value = e.model
			uni.setStorageSync("model", e.model)
			window.WebViewJavascriptBridge.callHandler(
				'WebTitle', '卡组',
				function(responseData) {
					console.log('native return->' + responseData);
				}
			);
		}

		if (e.token) {
			uni.setStorageSync("token", e.token)
		}
	})
	onShow(() => {
		const pages = getCurrentPages();
		 // 获取当前页面实例  
		 const currentPage = pages[pages.length - 1];  
		 // 获取当前页面的路由参数  
		 const options = currentPage.options;  
		 // 假设路由参数中包含 'id'  
		 let models   = options.model;  
				 let token   = options.token; 
				if (models) {
					model.value =models
					uni.setStorageSync("model", models)
				}
				if (token) {
					uni.setStorageSync("token", token)
				}
		uni.hideTabBar()
		initFilterConfig()
	})
	
	onUnload(() => {
		uni.showTabBar()
	})
	onHide(() => {
		uni.showTabBar()
	})
</script>

<style lang="scss" scoped>
	:deep(.uni-nav-bar-text) {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #17181A;
	}

	:deep(.uni-navbar__header-btns-left) {
		width: 60px !important;
	}

	.cardGroup-imitate {
		.mode-choose {
			display: flex;
			justify-content: space-between;
			padding: 24rpx;
			border-bottom: 2rpx solid #E8E9EB;

			.mode-item {
				width: 340rpx;
				height: 60rpx;
				line-height: 60rpx;
				background: #F2F3F5;
				border-radius: 64rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #47494D;
				text-align: center;
				box-sizing: border-box;
			}

			.active-mode {
				border: 2rpx solid #FF7800;
				color: #FD8B00;
				line-height: 56rpx;
				background: #FFF6EC;
			}
		}

		.occupation-list {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 90rpx;
			padding: 24rpx 44rpx;
			box-sizing: border-box;

			.occupation-item {
				width: 160rpx;

				.item-image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 20rpx;
					background: #F2F2F2;
					padding: 24rpx;
					box-sizing: border-box;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.item-name {
					width: 160rpx;
					height: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #2E3033;
					text-align: center;
				}
			}
		}

		.save-button {
			width: 416rpx;
			height: 72rpx;
			background: #FD8B00;
			border-radius: 136rpx 136rpx 136rpx 136rpx;
			margin: 100rpx auto 80rpx auto;

		}
	}

	:deep(.uni-navbar__header-btns-left) {
		width: 60px !important;
	}
</style>